<template>
  <div>
   <!-- 这个页面是从 Home 页面跳转过来的  要到路由配置文件中把Home页面的路由规则打开 -->
      <h3>router组件</h3>
      <button @click="update">更新组件</button>{{ num }}
  </div>
</template>

<script>
  export default {
      data(){
         return {
            num: 1234
         }
      },
      //组件进入前置守卫，在渲染该组件的对应路由被验证前调用。
      //因为组件实例还没有创建，所以此时还不能获取到 this ，可以给next函数一个回调，把vue实例传进去，等next执行跳转到新页面后执行回调
      //在组件创建的生命周期之前触发
      beforeRouteEnter(to, from, next){   
         console.log("beforeRouteEnter");
         next((vm)=>{         //next()函数一定要有，不然跳不过去新的页面或组件
            // console.log(vm);
         })      
      },
      beforeRouteUpdate(to, from, next){
         console.log("beforeRouteUpdate");
         console.log(this.$route.params.userId);   //1234
         next()
         this.num = this.$route.params.userId      //123456789
      },
      // 用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消导航跳转。
      beforeRouteLeave(to, from, next){   //在组件销毁生命周期之前触发
         console.log("beforeRouteLeave");
         const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
         if (answer) {     //如果点击确认就会跳转
            next()
         } else {
            next(false)
         }
         // next()
      },
      created(){
         console.log("created");
         console.log(this.$route);
         this.num = this.$route.params.userId
      },
      mounted(){
         // console.log("mounted");
      },
      destroyed(){
         // console.log("destroyed");
      },
      methods: {
         update(){
            if(this.$route.path !== "/router/123456789"){
               //此时组件属于复用，所以组件的 生命周期 和 beforeRouteEnter beforeRouteLeave 都不会触发
               var promise = this.$router.push("/router/123456789") 
               // console.log(promise);   //路由跳转可以返回一个promise，用于记录跳转的成功与失败
               this.num = this.$route.params.userId
            }
         }
      }
  }
</script>
<style lang='less' scoped>

</style>